---
name: useIntersectionObserver
rank: 5
tagline: Track and manage the visibility of your DOM elements within the viewport with useIntersectionObserver.
sandboxId: useintersectionobserver-uxlxkn
previewHeight: 500px
relatedHooks:
  - usemeasure
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useIntersectionObserver hook is useful because it provides a
  straightforward, built-in method for tracking the visibility and position of a
  DOM element in relation to the viewport. By leveraging the Intersection
  Observer API, it can greatly optimize performance and provide efficient,
  real-time updates for lazy-loading, infinite scrolling, or other
  visibility-dependent elements. With customizable thresholds and root margins,
  developers have fine-grained control over when the hook triggers, improving
  the user experience by dynamically loading content only when necessary.
</HookDescription>

<div class="reference">
  ### Parameters

  <div class="table-container">
  | Name       | Type    | Default | Description                                                                                                                                                                                                                                                |
  | ---------- | ------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | threshold  | number  | 1       | Either a single number or an array of numbers between 0 and 1, indicating at what percentage of the target’s visibility the observer’s callback should be executed.                                                                                        |
  | root       | element | null    | The Element that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.                                                                                                              |
  | rootMargin | string  | "0%"    | Margin around the root. Can have values similar to the CSS margin property. The values can be percentages. This set of values serves to grow or shrink each side of the root element’s bounding box before computing intersections. Defaults to all zeros. |
  </div>

  ### Return Value

  <div class="table-container">
  | Name  | Type             | Description                                                                                                     |
  | ----- | ---------------- | --------------------------------------------------------------------------------------------------------------- |
  | ref   | React ref object | A React reference that can be attached to a DOM element to observe.                                             |
  | entry | object           | An object containing information about the intersection. This object is similar to `IntersectionObserverEntry`. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useIntersectionObserver } from "@uidotdev/usehooks";
import demoData from "./demoData";

const Section = ({ imgUrl, caption, href }) => {
  const [ref, entry] = useIntersectionObserver({
    threshold: 0,
    root: null,
    rootMargin: "0px",
  });

  return (
    <section>
      <figure ref={ref}>
        {entry?.isIntersecting && (
          <>
            <img src={imgUrl} alt={caption} />
            <figcaption>
              <a href={href} alt={caption} target="_blank" rel="noreferrer">
                {caption}
              </a>
            </figcaption>
          </>
        )}
      </figure>
    </section>
  );
};

export default function App() {
  return (
    <main>
      <header>
        <h1>useIntersectionObserver</h1>
        <h6>
          (Memes from <a href="https://bytes.dev">bytes.dev</a>)
        </h6>
      </header>

      {demoData.map(({ imgUrl, href, caption }, index) => {
        return (
          <Section key={index} imgUrl={imgUrl} href={href} caption={caption} />
        );
      })}
    </main>
  );
}
```

</StaticCodeContainer>
